<template>
    <div class="bodyCont">
        <input type="text" class="inputPhoneNum" v-model="phoneNum" maxlength="11" />
        <div class="nextSteps" @click="nextSteps">下一步</div>
        <span class="warmText">温馨提示：目前仅支持湖南移动用户进行充值</span>
    </div>
</template>

<script>
export default{
    name: 'mobileRechargeTraffic',
    data() {
        return {
            name: 'mobileRechargeTraffic',
            phoneNum: '15211151724'
        }
    },
    methods: {
        checkNum (num) {
            // 移动手机号正则表达式
            var reg = "(^1(3[4-9]|4[7]|5[0-27-9]|7[8]|8[2-478])\\d{8}$)|(^1705\\d{7}$)"
            var pattern = new RegExp(reg)
            if (!pattern.test(num)) {
                return false;
            } else {
                return true;
            }

        },
        nextSteps () {
            console.log(this.phoneNum)
            if (this.checkNum(this.phoneNum)){
                // next
                this.$router.push('/shopActivity/rechargeTrafficDetail/'+this.phoneNum+'?phoneNum='+this.phoneNum);
            } else {
                this.$toast('请输入正确的移动手机号！')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.bodyCont{
    height: 100%;
    background: #fff;
    text-align:center;
    padding: 20px;
    .inputPhoneNum{
        background: #ddd;
        border: none;
        line-height: 3;
        width: 80%;
        padding: 0 20px;
        color: #ff5400;
        font-weight: bold;
        /*font-size: x-large;*/
    }
    .nextSteps{
        width: 80%;
        margin: 20px auto;
        background: #ff5400;
        color: #fff;
        line-height: 3;
    }
    .warmText{
        font-size: 12px;
        color: #ddd;
        text-align: center;
        width: 100%;
        display: block;
    }
}
</style>
